<template>
    <input type="text" v-model="keyWord" />
    <h4>{{keyWord}}</h4>
</template>

<script>
import { customRef } from 'vue'
export default {
    name: 'App',
    components:{},
    setup(){
        function myRef(value){
            console.log('--myRef--',value)
            let timer
            return customRef((track,trigger)=>{
                return {
                    get(){
                        track()//js 通知vue追踪数据的变化(追踪用到这个自定义ref的数值改变)
                        return value
                    },
                    set(newValue){
                        clearTimeout(timer)
                        setTimeout(()=>{
                            value = newValue
                            trigger()//js 通知vue重新解析模板
                        },1000)
                    }
                }
            })
        }
        // let keyWord = ref('hello world');//js 使用vue提供的ref
        let keyWord = myRef('hello')//js 使用程序员自定义的ref
        return{
            keyWord
        }
    }
}
</script>

<style>

</style>